<template>
  <view class="package space-between" style="background: linear-gradient(113deg, #D9EDFF 0%, #B6DDFE 100%);margin-bottom:40rpx;">
    <view class="direction-start">
      <view>蓝宝石<text style="font-size: 48rpx;color:#FF0000 ;margin-left:10rpx;">{{userInfo.gem}}</text></view>
      <view style="color:#666;font-size: 24rpx;margin-top:10rpx;">多种福利等你来拿</view>
    </view>
    <view class="but" @click="redirectTo('index/gemstone')">兑换福利</view>
  </view>
</template>

<script setup lang="ts">
  import { redirectTo } from '@/utils/navigator';
  import { useUserStore } from '@/stores/user';
  const userInfo = useUserStore();
  userInfo.gemstone()
</script>

<style scoped lang="less">
  .but {
    width: 180rpx;
    height: 64rpx;
    background: linear-gradient(-24deg, #43A8FF, #279BFF);
    border-radius: 32rpx;
    text-align: center;
    line-height: 64rpx;
    color: #fff;
  }
</style>